import React, { useEffect, useState } from 'react'
import { Button, Drawer, Checkbox, Form, Input, DatePicker, TreeSelect } from 'antd';
import { getAllCategory } from '../../../apis/category';
import { useDispatch, useSelector } from 'react-redux';
// import { allCategory } from '../../redux/product/productThunk';


type Props = {
    changeGoodsId: (id: string) => void,
    goodstypeId?: string
}

const ComTreeSelect = ({ changeGoodsId, goodstypeId }: Props) => {

    const [value, setValue] = useState<string>();
    const [treeData, setTreeData] = useState([]);
    // const dispatch = useDispatch()
    // const selector = useSelector((state) => state)


    useEffect(() => {
        allCategory()
        // console.log('goodstypeId', goodstypeId)
        setValue(goodstypeId)

        // dispatch<any>(allCategory())
        // setTreeData((selector as any).allCategory.rows.children)

    }, [goodstypeId])

    //获取所有分类数据
    const allCategory = async () => {
        const res = await getAllCategory()
        setTreeData((res as any).data.rows.children)
    }

    const onChange = (newValue: string) => {
        console.log(newValue);
        setValue(newValue);
        changeGoodsId(newValue)
    };
    return (
        <div>
            <TreeSelect
                allowClear={true}
                style={{ width: '200px' }}
                value={value}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                treeData={treeData}
                placeholder="请选择类型"
                treeDefaultExpandAll={false}
                onChange={onChange}
            />
        </div>
    )
}

export default ComTreeSelect